<!DOCTYPE html>
<html>
<title>FancyGame</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
	<base target="_blank">
	<script type="text/javascript">
		window.onload=(function(){
			var left_buttom_=document.getElementById("left_buttom");
			var right_buttom_=document.getElementById("right_buttom");
			left_buttom_.height=80;
			left_buttom_.width=40;
			right_buttom_.height=80;
			right_buttom_.width=40;
			var canvas1=left_buttom_.getContext("2d");
			var canvas2=right_buttom_.getContext("2d");
			canvas2.moveTo(2,2);
			canvas2.lineTo(38,38);
			canvas2.lineTo(2,78);
			canvas1.moveTo(38,2);
			canvas1.lineTo(2,38);
			canvas1.lineTo(38,78);
			canvas1.strokeStyle="#ccc";
			canvas2.strokeStyle="#ccc";
			canvas1.lineWidth=2;
			canvas2.lineWidth=2;
			canvas2.stroke();
			canvas1.stroke(); 
		})
		var choose=0;
		var temp_max=4;
		document.onkeydown=function(event)
		{
			var e = event || window.event || arguments.callee.caller.arguments[0]; 
	        	if (e && e.keyCode==39)
	        	{
	        		if(choose<slide_max)
	        			{choose++}
	        		document.getElementById("box"+choose).style.transform="translate(0px,-20px)";
	        		document.getElementById("box"+choose).style.boxShadow="10px 20px 50px #ddd";
	        		if (choose>1)
	        		{
	        			document.getElementById("box"+(choose-1)).style.transform="translate(0px,0px)";
	        			document.getElementById("box"+(choose-1)).style.boxShadow="10px 10px 30px #e5e5e5";
	        		}
	        		if (choose>4)
	        		{
	        			slide_right();
	        			temp_max=choose;
	        		}
	        	}
	        	if (e && e.keyCode==37)
	        	{
	        		if (choose>1)
	        			{choose--}
	        		document.getElementById("box"+choose).style.transform="translate(0px,-20px)";
	        		document.getElementById("box"+choose).style.boxShadow="10px 20px 50px #ddd";
	        		if (choose<slide_max)
	        		{
	        			document.getElementById("box"+(choose+1)).style.transform="translate(0px,0px)";
	        			document.getElementById("box"+(choose+1)).style.boxShadow="10px 10px 30px #e5e5e5";
	        		}
	        		if (choose<=(temp_max-4))
	        		{
	        			slide_left();
	        		}
	        	}
	        	if (e && e.keyCode==13)
	        	{
	        		if(choose!=0)
	        		{
	        			enter(choose);
	        		}
	        	}
	        	if (e && e.keyCode==27)
	        	{
	        		document.getElementById("box"+choose).style.transform="translate(0px,0px)";
	        		document.getElementById("box"+choose).style.boxShadow="10px 10px 30px #e5e5e5";
	        	}
	    }
	    function enter(order)
	    {
	    	var temp_a=document.getElementById("a"+order).href;
	    	window.open(temp_a);
	    }
		function move(dis,id)
		{
			document.getElementById("move_box").style.left=dis;
			document.getElementById("menu"+1).style.color="#000";
			document.getElementById("menu"+2).style.color="#000";
			document.getElementById("menu"+3).style.color="#000";
			document.getElementById("menu"+4).style.color="#000";
			document.getElementById("menu"+5).style.color="#000";
			document.getElementById(id).style.color="#fff";
		}
		var slide_i=0;
		var slide_max=7;
		function slide_right()
		{
			if (slide_i<(slide_max-4))
			{
				slide_i++;
				document.getElementById("main").style.transform="translate("+slide_i*(-280)+"px,0px)";
				document.getElementById("left_buttom").style.display="block";
			}
			if (slide_i>=(slide_max-4))
			{
				document.getElementById("right_buttom").style.display="none";
				document.getElementById("left_buttom").style.display="block";
			}
		}
		function slide_left()
		{
			if (slide_i>0)
			{
				slide_i--;
				document.getElementById("main").style.transform="translate("+slide_i*(-280)+"px,0px)";
				document.getElementById("right_buttom").style.display="block";
			}
			if (slide_i<1)
			{
				document.getElementById("right_buttom").style.display="block";
				document.getElementById("left_buttom").style.display="none";
			}
		}
	</script>
	<style type="text/css">
	.top_bar
	{
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
		height:70px;
		z-index:99999;
	}
	.top_text
	{
		position:absolute;
		top:50%;
		transform:translate(0px,-50%);
		left:60px;
		cursor:pointer;
		font-size:20px;
		width:100px;
		text-align:center;
		transition:all 0.5s;
		-webkit-transition:all 0.5s;
		color:#000;
	}
	.box
	{
		background-color:#f5f5f5;
		width:250px;
		height:350px;
		border-radius:30px;
		cursor:pointer;
		box-shadow:10px 10px 30px #e5e5e5;
		margin:15px;
		transition:all 0.5s;
		-webkit-transition:all 0.5s;
		overflow:hidden;
		color:#000;
		position:absolute;
		top:0px;
	}
	.box:hover
	{
		transform:translate(0px,-20px);
		box-shadow:10px 20px 50px #ddd;
	}
	a
	{
		text-decoration:none;
	}
	</style>
</head>
<body style="background-color:#ebe9e8;font-family:Arial,等线,微软雅黑">
	<div id="load" style="position:absolute;width:100%;height:100%;background-image:radial-gradient(#e61600,#d51e1e);top:50%;left:50%;transform:translate(-50%,-50%);z-index:99999999999;transition:all 0.2s;-webkit-transition:all 0.2s;overflow:hidden">
		<div id="logo" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;border-radius:25%;transition:all 0.3s">
			<svg version="1.1" id="logo1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" style="position:absolute;top:0px;left:0px;transform:rotate(40deg);transition:transform 0.5s,opacity 0.2s;opacity:0">
				<g>
					<path id="path1" style="transition:all 0.3s" fill="#eee" fill-rule="evenodd" clip-rule="evenodd" d="M104.467,114.866c2.082-1.055,4.043-2.266,5.866-3.666
						c12.355-9.492,22.662-21.808,24.467-41.867c0.556-6.177,0.153-12.274-1.066-17.4c-3.045-12.798-10.257-21.19-18.2-29.133
						c-1.649-1.649-3.342-3.207-5.066-4.733c-0.013-0.057,0.025-0.063,0.066-0.067c16.002,1.208,29.391,4.949,39,12.733
						c4.59,3.718,8.638,8.75,10.934,14.933c1.228,3.308,2.066,6.873,2.066,10.867c0,8.236-2.874,14.393-5.866,20
						c-4.496,8.425-10.46,15.406-17.667,21.133c-7.23,5.748-15.594,10.253-24.866,13.933
						C111.031,112.831,107.868,114.13,104.467,114.866z"/>
				</g>
			</svg>
			<svg version="1.1" id="logo2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" style="position:absolute;top:0px;left:0px;transform:rotate(40deg);transition:transform 0.5s,opacity 0.2s;opacity:0">
				<g>
					<path id="path2" style="transition:all 0.3s" fill="#eee" fill-rule="evenodd" clip-rule="evenodd" d="M53.067,111.267c0.686,0.124,1.25,0.557,1.866,0.867
						c9.263,4.656,19.804,8.498,32.667,9.6c14.629,1.252,27.21-2.431,37.2-7.333c10.064-4.939,18.953-11.087,26.467-18.601
						c5.572-5.572,10.043-12.479,13.533-20.267c1.197-2.67,2.342-5.395,3.334-8.2c1.084,1.811,1.619,3.957,2.267,6.066
						c1.927,6.287,3.149,13.438,3.6,21.2c0.62,10.693-0.382,21.225-3,29.733c-5.155,16.755-15.744,28.636-33.667,32.601
						c-9.604,2.124-21.114,1.355-29.8-0.8c-8.851-2.197-16.543-5.784-23.2-9.934C70.612,137.646,59.967,126.44,53.067,111.267z"/>
				</g>
			</svg>
			<svg version="1.1" id="logo3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" style="position:absolute;top:0px;left:0px;transition:transform 0.5s,opacity 0.2s;opacity:0">
				<g>
					<path id="path3" style="transition:all 0.3s" fill="#eee" fill-rule="evenodd" clip-rule="evenodd" d="M45.8,46.6c0.076,0.013,0.037,0.067,0,0.066 c-2.691,6.202-4.736,13.1-5.867,20.867c-1.138,7.826-1.205,17.138,0.134,24.8c2.589,14.819,8.422,27.449,15.933,37.4
					c15.29,20.257,37.168,34.188,71.467,35.2c0.229,0.108-0.224,0.273-0.4,0.399c-2.864,2.047-6.557,3.664-10.2,5
					c-3.988,1.464-8.317,2.664-12.866,3.4c-4.907,0.795-10.315,1.102-15.267,0.733c-9.945-0.739-17.805-3.776-24.667-7.8
					c-10.231-6.001-18.08-14.288-24.6-24.067C35.14,136.111,31.549,128.94,29,120.533c-2.517-8.302-4.074-18.16-3.267-28.8
					c0.746-9.825,2.972-18.453,6.533-25.934c1.725-3.624,3.679-7.147,5.867-10.4C40.331,52.132,42.819,49.099,45.8,46.6z"/>
				</g>
			</svg>
		</div>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$("#logo").height($("#logo").width());
			window.onload=(function(){
				setTimeout(function(){
					document.getElementById("logo3").style.opacity=1;
				},100)
				setTimeout(function(){
					document.getElementById("logo2").style.opacity=1;
					document.getElementById("logo2").style.transform="rotate(0deg)";
				},200)
				setTimeout(function(){
					document.getElementById("logo1").style.opacity=1;
					document.getElementById("logo1").style.transform="rotate(0deg)";
				},400)
				setTimeout(function(){
					$("#logo").css({"backgroundColor":"#eee"});
					$("#path1").attr("fill","#e61600");
					$("#path2").attr("fill","#e61600");
					$("#path3").attr("fill","#e61600");
				},1500)
				setTimeout(function(){
				document.getElementById("load").style.height="0px";
				},3000)
			})
		</script>
	</div>
	<div class="top_bar">
		<div class="top_text" id="move_box" style="left:10px;background-color:#00cc47;height:45px;border-radius:20px;"></div>
		<div id="menu1" class="top_text" style="left:10px;color:#fff" onmouseover="move('10px','menu1')">主页</div>
		<div id="menu2" class="top_text" style="left:110px" onmouseover="move('110px','menu2')">论坛</div>
		<div id="menu3" class="top_text" style="left:210px" onmouseover="move('210px','menu3')">建议</div>
		<a href="donate.html"><div id="menu4" class="top_text" style="left:310px" onmouseover="move('310px','menu4')">资助</div></a>
		<div id="menu5" class="top_text" style="left:410px" onmouseover="move('410px','menu5')">关于</div>
	</div>
	<div id="control" style="overflow:hidden;height:420px;width:1110px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)"><nobr>
	<div id="main" style="position:absolute;left:-5px;bottom:0px;height:400px;width:1120px;transition:all 1s;-webkit-transition:all 1s">
		<a id="a1" href="https://ymssx.github.io/gobang/"><div id="box1" class="box" style="left:0px">
			<div style="background-image:url('http://thyrsi.com/t6/362/1535179962x1822611251.jpg');background-size:100% 100%;background-position:center;height:250px;width:100%;"></div>
			<div style="height:100px;width:100%;bottom:0px;"><p style="text-align:center;font-size:20px">怪兽龙门骰</p><p style="font-size:10px;color:#aaa;text-align:center;transform:translate(0px,-10px);">召唤怪兽向前推进</p></div>			
		</div></a>
		<a id="a2" onclick="alert('敬请期待！')"><div id="box2" class="box" style="left:280px">
			<div style="background-image:url('http://thyrsi.com/t6/362/1535180032x-1404775443.jpg');background-size:100% 100%;background-position:center;height:250px;width:100%;"></div>
			<div style="height:100px;width:100%;bottom:0px;"><p style="text-align:center;font-size:20px">淘金者</p><p style="font-size:10px;color:#aaa;text-align:center;transform:translate(0px,-10px);">接住更多的金币</p></div>
		</div></a>
		<a id="a3" href="https://ymssx.github.io/yugioh/"><div id="box3" class="box" style="left:560px">
			<div style="background-image:url('http://thyrsi.com/t6/362/1535180051x-1404775491.jpg');background-size:100% 100%;background-position:center;height:250px;width:100%;"></div>
			<div style="height:100px;width:100%;bottom:0px;"><p style="text-align:center;font-size:20px">游戏王</p><p style="font-size:10px;color:#aaa;text-align:center;transform:translate(0px,-10px);">更方便的决斗</p></div>
		</div></a>
		<a id="a4" href="https://ymssx.gitee.io/trailer/"><div id="box4" class="box" style="left:840px">
			<div style="background-image:url('http://thyrsi.com/t6/362/1535180072x1822611251.jpg');background-size:100% 100%;background-position:center;height:250px;width:100%;"></div>
			<div style="height:100px;width:100%;bottom:0px;"><p style="text-align:center;font-size:20px">趣味拖板车</p><p style="font-size:10px;color:#aaa;text-align:center;transform:translate(0px,-10px);">新增功能牌</p></div>
		</div></a>
		<a id="a5" href="https://ymssx.gitee.io/snake/"><div id="box5" class="box" style="left:1120px">
			<div style="background-image:url('http://thyrsi.com/t6/362/1535180092x-1404817880.jpg');background-size:100% 100%;background-position:center;height:250px;width:100%;"></div>
			<div style="height:100px;width:100%;bottom:0px;"><p style="text-align:center;font-size:20px">彩色贪吃蛇</p><p style="font-size:10px;color:#aaa;text-align:center;transform:translate(0px,-10px);">吃到相同颜色蛇会断掉！</p></div>
		</div></a>
		<a id="a6" href="https://ymssx.gitee.io/gobang/"><div id="box6" class="box" style="left:1400px">
			<div style="background-image:url('http://thyrsi.com/t6/362/1535179962x1822611251.jpg');background-size:100% 100%;background-position:center;height:250px;width:100%;"></div>
			<div style="height:100px;width:100%;bottom:0px;"><p style="text-align:center;font-size:20px">五子棋</p><p style="font-size:10px;color:#aaa;text-align:center;transform:translate(0px,-10px);">双人娱乐首选</p></div>
		</div></a>\
		<a id="a7" href="https://ymssx.gitee.io/tv/"><div id="box7" class="box" style="left:1680px">
			<div style="background-image:url('http://thyrsi.com/t6/365/1535695748x-1376440090.jpg');background-size:100% 100%;background-position:center;height:250px;width:100%;"></div>
			<div style="height:100px;width:100%;bottom:0px;"><p style="text-align:center;font-size:20px">奥特曼1966</p><p style="font-size:10px;color:#aaa;text-align:center;transform:translate(0px,-10px);">怀旧经典</p></div>
		</div></a>
		<nobr>
	</div>
	</div>
	<canvas id="right_buttom" style="position:absolute;top:50%;left:50%;width:40px;height:80px;transform:translate(575px,-50%);cursor:pointer;" onclick="slide_right()"></canvas>
	<canvas id="left_buttom" style="position:absolute;top:50%;right:50%;width:40px;height:80px;transform:translate(-575px,-50%);cursor:pointer;display:none;" onclick="slide_left()"></canvas>
</body>
</html>